<template>
  <div class="wrap">
    <header>
      <div class="header">
        <span @click="go">&lt;</span>
        <h3>地图找房</h3>
      </div>
      <div class="quyu">
        <div class="search">
          <p @click="tocity" class="citysize">{{city}}</p>
          <div class="input">
            <input type="text" placeholder="请在这里输入区域/商圈" />
            <van-icon name="search" />
          </div>
        </div>
      </div>
      <div class="quyu2">
        <div class="tab">
          <a>
            <img src="../../img/house1.png" alt />
            <span>买房</span>
          </a>
          <a>
            <img src="../../img/house2.png" alt />
            <span>租房</span>
          </a>
        </div>
      </div>
    </header>
    <main>
      <div class="quyu1">
        <div class="want">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
            <van-dropdown-item v-model="value3" :options="option3" />
            <van-dropdown-item v-model="value4" :options="option4" />
          </van-dropdown-menu>
        </div>
      </div>
      <div>
        <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
          <!-- <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list> -->
          <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-map-type
            :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
            anchor="BMAP_ANCHOR_TOP_LEFT"
          ></bm-map-type>
          <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :showAddressBar="true"
            :autoLocation="true"
          ></bm-geolocation>
        </baidu-map>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      homeList: [],
      center: { lng: 0, lat: 0 },
      zoom: 3,
      city: "",
      value1: "区域",
      option1: [
        { text: "区域", value: "区域" },
        { text: "北京", value: "北京" },
        { text: "杭州", value: "杭州" },
        { text: "安徽", value: "安徽" },
        { text: "吉林", value: "吉林" }
      ],
      value2: "价格",
      option2: [
        { text: "价格", value: "价格" },
        { text: "1万", value: "万" },
        { text: "20-30万", value: "20-30万" },
        { text: "30-50万", value: "30-50万" },
        { text: "50-100万", value: "50-100万" },
        { text: "100万", value: "100万" }
      ],
      value3: "样式",
      option3: [
        { text: "样式", value: "样式" },
        { text: "别墅", value: "别墅" },
        { text: "二手房", value: "二手房" },
        { text: "酒店", value: "酒店" }
      ],
      value4: "东",
      option4: [
        { text: "东", value: "东" },
        { text: "南", value: "南" },
        { text: "北", value: "北" },
        { text: "东", value: "东" },
        { text: "西", value: "西" }
      ]
    };
  },
  created() {
    this.city = localStorage.getItem("city") || "北京";
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    mapfind() {
      this.$router.push("/map");
    },
    handler({ BMap, map }) {
      console.log(BMap, map);
      //经纬度  定位
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
    },
    tocity() {
      this.$router.push("/city");
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 99.8%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #999;
}
header {
  border-bottom: 1px solid #999;
  .header {
    width: 100%;
    height: 50px;
    background: rgb(72, 72, 225);
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    text-align: center;
    color: #fff;
    span {
      padding-left: 5%;
    }
    h3 {
      padding-left: 35%;
    }
  }
  .quyu {
    .search {
      width: 90%;
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 5px 15px;
      select {
        border: none;
        background: #fff;
      }
      .input {
        height: 30px;
        width: 200px;
        background: #f1f1f1;
        input {
          background: #f1f1f1;
          border: none;
          font-size: 14px;
          padding-left: 6px;
        }
        display: flex;
        align-items: center;
      }
    }
  }
  .quyu2 {
    width: 90%;
    .tab {
      align-items: center;
      height: 100px;
      display: flex;
      justify-content: space-around;
      margin: 0 7.5%;
      a {
        align-items: center;
        text-align: center;
        img {
          width: 50px;
          height: 50px;
        }
        span {
          display: block;
          font-size: 16px;
        }
      }
      a:hover {
        color: orange;
      }
    }
  }
}
main {
  flex: 1;
  overflow-y: scroll;

  .quyu1 {
    border-bottom: 1px solid #999;
  }
  .map {
    width: 100%;
    height: 400px;
  }
}
</style>